<template>
  <div style="overflow: scroll; height: 100vh;">
    <van-tabs v-model="active"
              :sticky="true"
              :duration="0"
              :swipe-threshold="5">
      <van-tab title="全部">
        <div style="width: 100%;height: 130px;background:lightskyblue;margin-top: 5px" v-for="item in orderVo" :key="item.orderInformation.id" >
          <a @click="zs(item)">
          <div style="float: right">
            <span style="color: red">{{item.orderInformation.orderStatus==1?"未完成>":""}}</span>
            <span style="color: red">{{item.orderInformation.orderStatus==2?"未完成>":""}}</span>
            <span style="color: orange">{{item.orderInformation.orderStatus==6?"待付款>":""}}</span>
            <span style="color: #DCDCDC">{{item.orderInformation.orderStatus==7?"已完成>":""}}</span>
            <span style="color: #DCDCDC">{{item.orderInformation.orderStatus==3?"已取消>":""}}</span>
            <span style="color: #DCDCDC">{{item.orderInformation.orderStatus==4?"已取消>":""}}</span>
            <span style="color: #DCDCDC">{{item.orderInformation.orderStatus==8?"已取消>":""}}</span>
          </div>
            <div style="text-align: left;margin-left: 10px;" v-if="item.orderInformation.orderStatus==6 || item.orderInformation.orderStatus==7"><van-icon name="clock" />{{(item.orderTime.destinationTime||"").split(" ")[0]}}   完成时间:{{(item.orderTime.destinationTime||"").split(" ")[1]}} </div>
            <div style="text-align: left;margin-left: 10px;" v-if="item.orderInformation.orderStatus==1 ||  item.orderInformation.orderStatus==2"><van-icon name="clock" />{{(item.orderTime.takeorderTime||"").split(" ")[0]}}   开始时间:{{(item.orderTime.takeorderTime||"").split(" ")[1]}} </div>
            <div style="text-align: left;margin-left: 10px;" v-if="item.orderInformation.orderStatus==3 ||  item.orderInformation.orderStatus==4"><van-icon name="clock" />{{(item.orderTime.orderTime||"").split(" ")[0]}}   完成时间:{{(item.orderTime.orderTime||"").split(" ")[1]}} </div>
          <div style="text-align: left;margin-left: 10px;margin-top: 10px;"><div style="width: 10px;height: 10px;border-radius: 10px;background: aquamarine;display: inline-block;"></div>{{ item.orderInformation.startingPointAddress }}</div>
          <div style="text-align: left;margin-left: 10px;margin-top: 10px;"><div style="width: 10px;height: 10px;border-radius: 10px;background: greenyellow;display: inline-block;"></div>{{ item.orderInformation.destinationAddress }}</div>
          <van-button type="default" style="width: 90px; height: 30px; border-radius: 20px; margin-left: 200px;" @click="lt(item)">消息</van-button>
          <van-button type="default" style="width: 90px; height: 30px; border-radius: 20px; margin-left: 10px" @click="feedback(item)">反馈</van-button>
          </a>
        </div>
      </van-tab>
      <van-tab title="未完成">
        <div style="width: 100%;height: 130px;background:lightskyblue;margin-top: 5px" v-for="item in orderVo" :key="item.orderInformation.id" v-show="item.orderInformation.orderStatus==1 || item.orderInformation.orderStatus==2">
          <a @click="zs(item)">
            <div style="float: right">
              <span style="color: red">{{item.orderInformation.orderStatus==1?"未完成>":""}}</span>
              <span style="color: red">{{item.orderInformation.orderStatus==2?"未完成>":""}}</span>
              <span style="color: orange">{{item.orderInformation.orderStatus==6?"待付款>":""}}</span>
              <span style="color: #DCDCDC">{{item.orderInformation.orderStatus==7?"已完成>":""}}</span>
              <span style="color: #DCDCDC">{{item.orderInformation.orderStatus==3?"已取消>":""}}</span>
              <span style="color: #DCDCDC">{{item.orderInformation.orderStatus==4?"已取消>":""}}</span>
              <span style="color: #DCDCDC">{{item.orderInformation.orderStatus==8?"已取消>":""}}</span>
            </div>
            <div style="text-align: left;margin-left: 10px;" v-if="item.orderInformation.orderStatus==6 || item.orderInformation.orderStatus==7"><van-icon name="clock" />{{(item.orderTime.destinationTime||"").split(" ")[0]}}   完成时间:{{(item.orderTime.destinationTime||"").split(" ")[1]}} </div>
            <div style="text-align: left;margin-left: 10px;" v-if="item.orderInformation.orderStatus==1 ||  item.orderInformation.orderStatus==2"><van-icon name="clock" />{{(item.orderTime.takeorderTime||"").split(" ")[0]}}   开始时间:{{(item.orderTime.takeorderTime||"").split(" ")[1]}} </div>
            <div style="text-align: left;margin-left: 10px;" v-if="item.orderInformation.orderStatus==3 ||  item.orderInformation.orderStatus==4"><van-icon name="clock" />{{(item.orderTime.orderTime||"").split(" ")[0]}}   完成时间:{{(item.orderTime.orderTime||"").split(" ")[1]}} </div>
            <div style="text-align: left;margin-left: 10px;margin-top: 10px;"><div style="width: 10px;height: 10px;border-radius: 10px;background: aquamarine;display: inline-block;"></div>{{ item.orderInformation.startingPointAddress }}</div>
            <div style="text-align: left;margin-left: 10px;margin-top: 10px;"><div style="width: 10px;height: 10px;border-radius: 10px;background: greenyellow;display: inline-block;"></div>{{ item.orderInformation.destinationAddress }}</div>
            <van-button type="default" style="width: 90px; height: 30px; border-radius: 20px; margin-left: 200px;" @click="lt(item)">消息</van-button>
            <van-button type="default" style="width: 90px; height: 30px; border-radius: 20px; margin-left: 10px" @click="feedback(item)">反馈</van-button>
          </a>
        </div>
      </van-tab>
      <van-tab title="待付款">
        <div style="width: 100%;height: 130px;background:lightskyblue;margin-top: 5px" v-for="item in orderVo" :key="item.orderInformation.id" v-show="item.orderInformation.orderStatus==6">
          <a @click="zs(item)">
            <div style="float: right">
              <span style="color: red">{{item.orderInformation.orderStatus==1?"未完成>":""}}</span>
              <span style="color: red">{{item.orderInformation.orderStatus==2?"未完成>":""}}</span>
              <span style="color: orange">{{item.orderInformation.orderStatus==6?"待付款>":""}}</span>
              <span style="color: #DCDCDC">{{item.orderInformation.orderStatus==7?"已完成>":""}}</span>
              <span style="color: #DCDCDC">{{item.orderInformation.orderStatus==3?"已取消>":""}}</span>
              <span style="color: #DCDCDC">{{item.orderInformation.orderStatus==4?"已取消>":""}}</span>
              <span style="color: #DCDCDC">{{item.orderInformation.orderStatus==8?"已取消>":""}}</span>
            </div>
            <div style="text-align: left;margin-left: 10px;" v-if="item.orderInformation.orderStatus==6 || item.orderInformation.orderStatus==7"><van-icon name="clock" />{{(item.orderTime.destinationTime||"").split(" ")[0]}}   完成时间:{{(item.orderTime.destinationTime||"").split(" ")[1]}} </div>
            <div style="text-align: left;margin-left: 10px;" v-if="item.orderInformation.orderStatus==1 ||  item.orderInformation.orderStatus==2"><van-icon name="clock" />{{(item.orderTime.takeorderTime||"").split(" ")[0]}}   开始时间:{{(item.orderTime.takeorderTime||"").split(" ")[1]}} </div>
            <div style="text-align: left;margin-left: 10px;" v-if="item.orderInformation.orderStatus==3 ||  item.orderInformation.orderStatus==4"><van-icon name="clock" />{{(item.orderTime.orderTime||"").split(" ")[0]}}   完成时间:{{(item.orderTime.orderTime||"").split(" ")[1]}} </div>
            <div style="text-align: left;margin-left: 10px;margin-top: 10px;"><div style="width: 10px;height: 10px;border-radius: 10px;background: aquamarine;display: inline-block;"></div>{{ item.orderInformation.startingPointAddress }}</div>
            <div style="text-align: left;margin-left: 10px;margin-top: 10px;"><div style="width: 10px;height: 10px;border-radius: 10px;background: greenyellow;display: inline-block;"></div>{{ item.orderInformation.destinationAddress }}</div>
            <van-button type="default" style="width: 90px; height: 30px; border-radius: 20px; margin-left: 200px;" @click="lt(item)">消息</van-button>
            <van-button type="default" style="width: 90px; height: 30px; border-radius: 20px; margin-left: 10px" @click="feedback(item)">反馈</van-button>
          </a>
        </div>
      </van-tab>
      <van-tab title="已完成">
        <div style="width: 100%;height: 130px;background:lightskyblue;margin-top: 5px" v-for="item in orderVo" :key="item.orderInformation.id" v-show="item.orderInformation.orderStatus==7">
          <a @click="zs(item)">
            <div style="float: right">
              <span style="color: red">{{item.orderInformation.orderStatus==1?"未完成>":""}}</span>
              <span style="color: red">{{item.orderInformation.orderStatus==2?"未完成>":""}}</span>
              <span style="color: orange">{{item.orderInformation.orderStatus==6?"待付款>":""}}</span>
              <span style="color: #DCDCDC">{{item.orderInformation.orderStatus==7?"已完成>":""}}</span>
              <span style="color: #DCDCDC">{{item.orderInformation.orderStatus==3?"已取消>":""}}</span>
              <span style="color: #DCDCDC">{{item.orderInformation.orderStatus==4?"已取消>":""}}</span>
              <span style="color: #DCDCDC">{{item.orderInformation.orderStatus==8?"已取消>":""}}</span>
            </div>
            <div style="text-align: left;margin-left: 10px;" v-if="item.orderInformation.orderStatus==6 || item.orderInformation.orderStatus==7"><van-icon name="clock" />{{(item.orderTime.destinationTime||"").split(" ")[0]}}   完成时间:{{(item.orderTime.destinationTime||"").split(" ")[1]}} </div>
            <div style="text-align: left;margin-left: 10px;" v-if="item.orderInformation.orderStatus==1 ||  item.orderInformation.orderStatus==2"><van-icon name="clock" />{{(item.orderTime.takeorderTime||"").split(" ")[0]}}   开始时间:{{(item.orderTime.takeorderTime||"").split(" ")[1]}} </div>
            <div style="text-align: left;margin-left: 10px;" v-if="item.orderInformation.orderStatus==3 ||  item.orderInformation.orderStatus==4"><van-icon name="clock" />{{(item.orderTime.orderTime||"").split(" ")[0]}}   完成时间:{{(item.orderTime.orderTime||"").split(" ")[1]}} </div>
            <div style="text-align: left;margin-left: 10px;margin-top: 10px;"><div style="width: 10px;height: 10px;border-radius: 10px;background: aquamarine;display: inline-block;"></div>{{ item.orderInformation.startingPointAddress }}</div>
            <div style="text-align: left;margin-left: 10px;margin-top: 10px;"><div style="width: 10px;height: 10px;border-radius: 10px;background: greenyellow;display: inline-block;"></div>{{ item.orderInformation.destinationAddress }}</div>
            <van-button type="default" style="width: 90px; height: 30px; border-radius: 20px; margin-left: 200px;" @click="lt(item)">消息</van-button>
            <van-button type="default" style="width: 90px; height: 30px; border-radius: 20px; margin-left: 10px" @click="feedback(item)">反馈</van-button>
          </a>
        </div>
      </van-tab>
      <van-tab title="已取消">
        <div style="width: 100%;height: 130px;background:lightskyblue;margin-top: 5px" v-for="item in orderVo" :key="item.orderInformation.id" v-show="item.orderInformation.orderStatus==3 || item.orderInformation.orderStatus==4 || item.orderInformation.orderStatus==8">
          <a @click="zs(item)">
            <div style="float: right">
              <span style="color: red">{{item.orderInformation.orderStatus==0?"未完成>":""}}</span>
              <span style="color: red">{{item.orderInformation.orderStatus==1?"未完成>":""}}</span>
              <span style="color: red">{{item.orderInformation.orderStatus==2?"未完成>":""}}</span>
              <span style="color: orange">{{item.orderInformation.orderStatus==6?"待付款>":""}}</span>
              <span style="color: #DCDCDC">{{item.orderInformation.orderStatus==7?"已完成>":""}}</span>
              <span style="color: #DCDCDC">{{item.orderInformation.orderStatus==3?"已取消>":""}}</span>
              <span style="color: #DCDCDC">{{item.orderInformation.orderStatus==4?"已取消>":""}}</span>
              <span style="color: #DCDCDC">{{item.orderInformation.orderStatus==8?"已取消>":""}}</span>
            </div>
            <div style="text-align: left;margin-left: 10px;" v-if="item.orderInformation.orderStatus==6 || item.orderInformation.orderStatus==7"><van-icon name="clock" />{{(item.orderTime.destinationTime||"").split(" ")[0]}}   完成时间:{{(item.orderTime.destinationTime||"").split(" ")[1]}} </div>
            <div style="text-align: left;margin-left: 10px;" v-if="item.orderInformation.orderStatus==1 ||  item.orderInformation.orderStatus==2"><van-icon name="clock" />{{(item.orderTime.takeorderTime||"").split(" ")[0]}}   开始时间:{{(item.orderTime.takeorderTime||"").split(" ")[1]}} </div>
            <div style="text-align: left;margin-left: 10px;" v-if="item.orderInformation.orderStatus==3 ||  item.orderInformation.orderStatus==4"><van-icon name="clock" />{{(item.orderTime.orderTime||"").split(" ")[0]}}   完成时间:{{(item.orderTime.orderTime||"").split(" ")[1]}} </div>
            <div style="text-align: left;margin-left: 10px;margin-top: 10px;"><div style="width: 10px;height: 10px;border-radius: 10px;background: aquamarine;display: inline-block;"></div>{{ item.orderInformation.startingPointAddress }}</div>
            <div style="text-align: left;margin-left: 10px;margin-top: 10px;"><div style="width: 10px;height: 10px;border-radius: 10px;background: greenyellow;display: inline-block;"></div>{{ item.orderInformation.destinationAddress }}</div>
            <van-button type="default" style="width: 90px; height: 30px; border-radius: 20px; margin-left: 200px;"  @click="lt(item)">消息</van-button>
            <van-button type="default" style="width: 90px; height: 30px; border-radius: 20px; margin-left: 10px" @click="feedback(item)">反馈</van-button>
          </a>
        </div>
      </van-tab>
    </van-tabs>

    <Tabbar/>
  </div>
</template>

<script>
import { findOrder } from '@/components/api/historyorder/historyorder';
import Tabbar from "@/components/Tabbar.vue"



export default {
  components: {
    Tabbar,
  },
  data() {
    return {
      map:null,
      active: 0,
      address:null,
      orderVo:[],
      driver:{

      },
    };
  },

  created() {
    this.getDriver();
  },


  methods: {
    //聊天跳转
    lt(item){
        this.$router.push({path:'/DriverChatMessage',query:{userId: item.orderInformation.userId}})
    },
    // 获取司机信息
    getDriver(){
       this.driver=JSON.parse(localStorage.getItem("personalUser"));
       if(this.driver==null){
         this.$router.push({
           path: '/'
         })
       }
       this.findOrder();
    },
    // 跳转反馈页面
    feedback(item){
      this.$router.push({
        path: '/feedback',
        query: {order:item}
      })
    },
    zs(item){
      // 根据状态跳转订单详情页面
      if(item.orderInformation.orderStatus==1){
        this.$router.push({
          path: '/notFinishedOrder',
          query: {order:item}
        })
      }
      if(item.orderInformation.orderStatus==2){
        this.$router.push({
          path: '/notFinishedOrder',
          query: {order:item}
        })
      }

      if(item.orderInformation.orderStatus==6){
        this.$router.push({
          path: '/pendingPaymentOrder',
          query: {order:item}
        })
      }
      if(item.orderInformation.orderStatus==7){
        this.$router.push({
          path: '/paidOrder',
          query: {order:item}
        })
      }

    },
    // 获取该司机订单
    findOrder(){
      findOrder(this.driver.id).then(res => {
        this.orderVo=res.data;
      })
    },

  },


};
</script>
<style>
</style>
